<!-- 基础配置-原材料-新增or修改原材料检测 -->
<template>
  <div>
    <el-dialog :title="title" :visible.sync="open" width="60%" append-to-body :close-on-click-modal="false"
      v-dialogDrag>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-tabs v-model="activeName" class="detail-tab" type="card">
          <el-tab-pane label="原材料信息" name="first">
            <el-row style="border: 1px solid #EBEEF5;border-radius: 5px;padding: 10px 15px;">
              <el-col :span="8" style="display: flex;align-items: center;">
                <div style="font-size: 14px;color: #333;font-weight: 500;margin-right: 15px;">
                  原材料名称
                </div>
                <div>
                  xx铝材(铝型材)
                </div>
              </el-col>
              <el-col :span="8" style="display: flex;align-items: center;">
                <div style="font-size: 14px;color: #333;font-weight: 500;margin-right: 15px;">
                  原材料类型
                </div>
                <div>
                  铝材(铝型材)
                </div>
              </el-col>
              <el-col :span="8" style="display: flex;align-items: center;">
                <div style="font-size: 14px;color: #333;font-weight: 500;margin-right: 15px;">
                  原材料编号
                </div>
                <div>
                  YLJ2411040002
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="原材料检验信息" name="two">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="物资种类" prop="type">
                  <el-select style="width: 100%;" placeholder="请选择物资种类" v-model="form.type">
                    <el-option :label="item" :value="item" v-for="(item,index) in typeList" :key="index"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="检验批次号" prop="num">
                  <el-input v-model="form.num" placeholder="请输入检验批次号" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="检验日期" prop="putStorageTime">
                  <el-date-picker style="width: 100%;" clearable placeholder="请选择检验日期" type="date"
                    v-model="form.putStorageTime" value-format="yyyy-MM-dd">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备注" prop="eipMatDes">
                  <el-input v-model="form.eipMatDes" type="textarea" placeholder="请输入备注" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="原材料检测" name="three">
            <el-table :data="dataList" border max-height="680px">
              <el-table-column style="font-size: 14px;font-weight: 500;" label="检查项目" align="center"
                :show-overflow-tooltip="true" prop="project" />
              <el-table-column label="检查值" align="center" :show-overflow-tooltip="true" prop="num">
                <template slot-scope="scope">
                  <el-input v-if="scope.row.type == 1" style="font-size: 14px;" v-model="scope.row.num"
                    placeholder="请输入" />
                  <el-input-number v-if="scope.row.type == 2" size="medium" style="font-size: 14px;"
                    v-model="scope.row.num" @change="handleChange" :min="0" :max="100" label="请输入"></el-input-number>
                  <el-date-picker v-if="scope.row.type == 3" v-model="scope.row.num" style="font-size: 14px;" type="date" placeholder="选择日期">
                  </el-date-picker>
                  <el-upload v-if="scope.row.type == 4" drag action="https://jsonplaceholder.typicode.com/posts/"
                    multiple>
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">只能上传word文件，且不超过500kb</div>
                  </el-upload>
                </template>
              </el-table-column>
              <el-table-column label="单位" align="center" :show-overflow-tooltip="true" prop="unit" />
              <el-table-column label="数据格式要求" align="center" :show-overflow-tooltip="true" prop="require" />
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // 遮罩层
        loading: true,
        activeName: "first",
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 表单参数
        form: {},
        // 表单校验
        rules: {},
        url: {
          getById: '/goodsFundBack/goodsFundBack/',
          add: '/goodsFundBack/goodsFundBack/add',
          edit: '/goodsFundBack/goodsFundBack/edit',
        },
        typeList: ['金属杆', '屏蔽料', '绝缘料', '护套料', '外护套', '铝（铝合金）杆', '镀锌钢线', '铝包钢线', '光纤', '铝包钢', '铝合金线', '硬铝线', '纤膏',
          'PE护套料', '半导电硅胶', '绝缘硅胶', '电磁线', '漆包线', '支撑绝缘体', '铁芯（电压）', '扩张套管', '铜外壳', '套管'
        ],
        dataList: [],
        isObj: [{
            project: '炉批号',
            num: '',
            unit: '--',
            type: 1,
            require: '中英文，符号字符文本'
          },
          {
            project: '来料检验批次号',
            num: '',
            unit: '--',
            type: 1,
            require: '中英文，符号字符文本'
          },
          {
            project: '化学成分分析-C',
            num: '',
            unit: '%',
            type: 2,
            require: '小数点后三位'
          },
          {
            project: '化学成分分析-P',
            num: '',
            unit: '%',
            type: 2,
            require: '小数点后三位'
          },
          {
            project: '化学成分分析-S',
            num: '',
            unit: '%',
            type: 2,
            require: '小数点后三位'
          },
          {
            project: '化学成分分析-AI',
            num: '',
            unit: '%',
            type: 2,
            require: '小数点后三位'
          },
          {
            project: '化学成分分析-Si',
            num: '',
            unit: '%',
            type: 2,
            require: '小数点后三位'
          },
          {
            project: '化学成分分析-Fe',
            num: '',
            unit: '%',
            type: 2,
            require: '小数点后三位'
          },
          {
            project: '化学成分分析-Cu',
            num: '',
            unit: '%',
            type: 2,
            require: '小数点后三位'
          },
          {
            project: '化学成分分析-Mn',
            num: '',
            unit: '%',
            type: 2,
            require: '小数点后三位'
          },
          {
            project: '化学成分分析-Mg',
            num: '',
            unit: '%',
            type: 2,
            require: '小数点后三位'
          },
          {
            project: '化学成分分析-Zn',
            num: '',
            unit: '%',
            type: 2,
            require: '小数点后三位'
          },
          {
            project: '化学成分分析-Ni',
            num: '',
            unit: '%',
            type: 2,
            require: '小数点后三位'
          },
          {
            project: '化学成分分析-Ti',
            num: '',
            unit: '%',
            type: 2,
            require: '小数点后三位'
          },
          {
            project: '化学成分分析-Cr',
            num: '',
            unit: '%',
            type: 2,
            require: '小数点后三位'
          },
          {
            project: '化学成分分析-Mo',
            num: '',
            unit: '%',
            type: 2,
            require: '小数点后三位'
          },
          {
            project: '出厂检测日期',
            num: '',
            unit: '年月日',
            type: 3,
            require: 'YYYY-MM-DD'
          },
          {
            project: '入厂检测日期',
            num: '',
            unit: '年月日',
            type: 3,
            require: 'YYYY-MM-DD'
          },
          {
            project: '质量证明书',
            num: '',
            unit: '--',
            type: 4,
            require: '上传附件'
          },
          {
            project: '机械性能-抗拉强度',
            num: '',
            unit: '--',
            type: 2,
            require: '小数点后三位'
          },
          {
            project: '屈服强度',
            num: '',
            unit: '--',
            type: 2,
            require: '小数点后三位'
          },
          {
            project: '机械性能-断后伸长率',
            num: '',
            unit: '--',
            type: 2,
            require: '小数点后三位'
          },
          {
            project: '机械性能-硬度',
            num: '',
            unit: '--',
            type: 2,
            require: '小数点后三位'
          },
          {
            project: '外观、表面质量',
            num: '',
            unit: '--',
            type: 1,
            require: '中英文，符号字符文本'
          },
          {
            project: '尺寸',
            num: '',
            unit: '--',
            type: 1,
            require: '中英文，符号字符文本'
          },
          {
            project: '规格',
            num: '',
            unit: '--',
            type: 1,
            require: '中英文，符号字符文本'
          },
          {
            project: '拉伸强度',
            num: '',
            unit: '--',
            type: 2,
            require: '小数点后三位'
          },
          {
            project: '延伸率',
            num: '',
            unit: '%',
            type: 2,
            require: '小数点后三位'
          },
          {
            project: '力学性能-单丝强度',
            num: '',
            unit: '--',
            type: 2,
            require: '小数点后三位'
          }
        ]
      }
    },
    methods: {
      handleChange(){

      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          type: null,
          num: null,
          putStorageTime: null,
          eipMatDes: null
        };
        this.dataList = this.isObj
        this.resetForm("form");
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加原料检测";
        this.dataList = []
        this.dataList = this.isObj
        this.activeName = "first";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids;
        this.form = {
          id: 1,
          type: '金属杆',
          num: 'PCH1730553018127',
          putStorageTime: '2024-10-21',
          eipMatDes: '暂无备注'
        };
        this.open = true;
        this.title = "修改原料检测";
        this.activeName = "first";
        this.dataList = this.isObj
        this.dataList[0].num = 'PCH17305530'
        this.dataList[1].num = '0553018127'
        this.dataList[2].num = '0.01'
        this.dataList[3].num = '1'
        this.dataList[4].num = '4.32'
        this.dataList[5].num = '2.3'
        this.dataList[6].num = '1.832'
        this.dataList[7].num = '1.3'
        this.dataList[8].num = '2.01'
        this.dataList[9].num = '1.322'
        this.dataList[10].num = '2.5'
        this.dataList[11].num = '3.3'
        this.dataList[12].num = '1.2'
        this.dataList[13].num = '0.3'
        this.dataList[14].num = '0.1'
        this.dataList[15].num = '0.32'

        this.dataList[16].num = '2024-08-04'
        this.dataList[17].num = '2024-10-21'
        this.dataList[18].num = '7.24-7.28.pdf'
        this.dataList[19].num = '10'
        this.dataList[20].num = '1'
        this.dataList[21].num = '3'
        this.dataList[22].num = '3'
        this.dataList[23].num = '优秀'
        this.dataList[24].num = '2.4/2.9'
        this.dataList[25].num = 'GBT 3048-2007 电'
        this.dataList[26].num = '123'
        this.dataList[27].num = '38'
        this.dataList[28].num = '91'
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.$emit('ok');
            } else {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.$emit('ok');
            }
          }
        });
      },
    }
  }
</script>

<style scoped lang="scss">
  ::v-deep .detail-tab .el-tabs__nav {
    border-bottom: none !important;
  }

  ::v-deep .el-input-number--medium {
    width: 100%;
  }

  ::v-deep .el-upload-dragger {
    width: 220px;
    height: 150px;
  }
</style>
